import FormRender, { useForm } from '@sei/suid-form-render-mobile';
import { Button,InputNumber, Dialog } from '@sei/suid-mobile';
import React from "react";

export default () => {
  const form = useForm();

  const schema = {
    type: 'object',
    properties: {
      list1: {
        title: '对象数组',
        type: 'array',
        widget: 'cardList',
        min: 0,
        max: 20,
        items: {
          type: 'object',
          widget: 'card',
          properties: {
            input1: {
              title: '输入框 A',
              type: 'string',
              widget: 'input',
            },
            input2: {
              title: '输入框 B',
              type: 'string',
              widget: 'input',
            },
            input3: {
              title: '输入框 B',
              type: 'string',
              widget: 'input',
            },
          },
        },
      }
    },
  };


  const onFinish = (formData: any) => {
    Dialog.alert({
      content: <pre>{JSON.stringify(formData, null, 2)}</pre>,
    });
  };

  return (
    <FormRender
      style={{ height: '100vh',backgroundColor: '#f5f5f5' }}
      schema={schema}
      form={form}
      onFinish={onFinish}
      readOnly={false}
      widgets={{
        inputNumber: InputNumber,
      }}
      footer={
        <Button block type="submit" color="primary" size="large">
          提交
        </Button>
      }
    />
  );
};
